<template>
  <!-- ElContainer 是 element-plus 中提供的容器组件 -->
  <el-container>
    
    <!-- ElHeader 是 element-plus 中提供的用来表示头部的容器组件 -->
    <el-header class="header">
      <!-- 路由出口 ( 命名视图 )-->
      <router-view name="header"></router-view>
    </el-header>

    <el-container class="middle">
      <!-- 路由出口 ( 默认 name 是 default )-->
      <router-view></router-view>
    </el-container>

    <!-- ElFooter 是 element-plus 中提供的用来表示底部的容器组件 -->
    <el-footer class="footer">
      <!-- 路由出口 ( 命名视图 )-->
      <router-view name="footer"></router-view>
    </el-footer>

  </el-container>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.header {
  height: 10vh;
}
.middle{
  background: #f0f0f0;
  height: 80vh;
}
.footer {
  height: 10vh;
}
</style>
